import React, {Component, Fragment} from 'react';
import {connect} from 'react-redux';
import {View, Text, ScrollView, StyleSheet} from 'react-native';
import {
    WingBlank,
    WhiteSpace
} from 'antd-mobile-rn';
import Search from '../../components/Search';
import SafeAreaView from '../../components/SafeAreaView';
import PlayIcon from '../../components/PlayIcon';
import IconButton from '$/components/IconButton';
import NavUtils from '../../utils/NavUtils';
import {SmallHead, BigHead} from '../../components/Header';

class Find extends Component{
    constructor() {
        super();
    }
    componentDidMount(): void {}

    toolPress = title => {
        console.log(title);
    }

    render(){
        const {
            app:{
                color
            },
            find:{
                tools
            }
        } = this.props;
        return (
            <SafeAreaView>
                <ScrollView style={{height: '100%', backgroundColor: '#fff'}}>
                    {/*<View style={styles.searchBox}>
                            <Search
                                style={{borderRadius: 20, flex: 1}}
                                disabled={true}
                                inputProps={{
                                    autoFocus:false,// 自动聚焦
                                    keyboardType:'default'
                                }}
                                placeholder={'平胸女子-枯木逢春'}
                                onPress={() => {}}//点击事件
                            />
                            <PlayIcon theme={color}/>
                        </View>*/}

                    <View style={[styles.tools, {paddingLeft: 15, paddingRight: 15}]}>
                        { tools.map(({title, icon}, index) => <IconButton onPress={() => this.toolPress(title)} key={index} theme={color} name={title} icon={icon}/>) }
                    </View>
                    <WhiteSpace size="lg" />
                    <SmallHead>推荐歌单</SmallHead>
                    <BigHead right={<Text style={{fontSize: 12,color: '#333'}}>查看更多</Text>}>为你精挑细选</BigHead>
                </ScrollView>
            </SafeAreaView>

        )
    }
}
export default connect(({app, find}) => ({app, find}), dispatch => ({

}))(Find);

const styles = StyleSheet.create({
    searchBox:{
        marginLeft: 15,
        marginRight: 15,
        height: 40,
        flexDirection: 'row',
        alignItems: 'center',
    },
    tools:{
        height: 80,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderBottomWidth: 1,
        borderBottomColor: '#F4F4F4',
    },
})



